<template>
	<view class="content">
		<view class="" style="width: 90%;margin:0 auto">
			<uni-forms ref="form" :modelValue="personnel" :rules="rules">
				<uni-forms-item label="小区">
					<uni-data-picker placeholder="请选择小区" popup-title="请选择所在小区" :localdata="dataTree1"
						v-model="personnel.communityId" @change="onchange" @nodeclick="onnodeclick1"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="楼栋">
					<uni-data-picker placeholder="请选择楼栋" popup-title="请选择所在楼栋" :localdata="buildingData"
						v-model="personnel.buildingId" @change="onchange" @nodeclick="buildingclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="单元">
					<uni-data-picker placeholder="请选择单元" popup-title="请选择所在单元" :localdata="cellData"
						v-model="personnel.cellId" @change="onchange" @nodeclick="cellclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="楼层">
					<uni-data-picker placeholder="请选择楼层" popup-title="请选择所在楼层" :localdata="floorData"
						v-model="personnel.floorId" @change="onchange" @nodeclick="floorclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="户号">
					<uni-data-picker placeholder="请选择户号" popup-title="请选择所在户号" :localdata="portalData"
						v-model="personnel.portalId" @change="onchange" @nodeclick="portalclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed" style="width: 300px;">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="报修房屋" name="houseingName" required>
					<uni-easyinput type="text" v-model="personnel.houseingName" placeholder="请输入房屋" />
				</uni-forms-item>
				<uni-forms-item label="维修项目" name="maintenanceProjectsId" required>
					<!-- 			<uni-easyinput type="text" v-model="personnel.maintenance_projects_id" placeholder="请输入维修项目" />
					<uni-easyinput type="text" v-model="personnel.project_type_id" v-show="!flag"
						placeholder="请输入维修项目" /> -->
					<uni-data-picker placeholder="请选择维修项目" popup-title="请选择家居" :localdata="dataTree" v-model="classes"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
						@popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="标题" name="theTitle" required>
					<uni-easyinput type="text" v-model="personnel.theTitle" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="问题描述" name="problemDescription" required>
					<uni-easyinput type="text" v-model="personnel.problemDescription" placeholder="请输入问题描述" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phone" required>
					<uni-easyinput type="text" v-model="personnel.phone" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="预约日期" name="appointmentTime" required>
					<uni-datetime-picker timestamp v-model="personnel.appointmentTime"></uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item label="附件照片" name="endtime" required>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</uni-forms-item>
			</uni-forms>
			<button @click="submitForm" class="button-login" hover-class="button-hover">提交审核</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				xiaoquname: '', //小区名
				loudongname: '', //楼栋名
				danyuanname: '', //单元名
				loucengname: '', //楼层名

				portalData: '',
				floorId: '',
				floorData: [],
				cellData: [],
				dataTree1: [],
				buildingData: [],
				aa: [],
				children: [],
				classes: '',
				dataTree: [],
				elevatorshow: false,
				flag: true,
				loading: false,
				tabList: [],
				token: '',
				name: '',
				hobby: '男',
				fileList1: [],
				communityId: '',
				cellId: '',
				portalId: '',
				// userId: uni.getStorageSync('loginData').user_id,
				personnel: {
					userId: 1,
					houseingName: '',
					maintenanceProjectsId: '',
					theTitle: '',
					problemDescription: '',
					phone: '',
					appointmentTime: '',
					projectTypeId: '',
					communityId: '',
					buildingId: '',
					cellId: '',
					floorId: '',
					portalId: '',
					fileUrl: '',
				},
				rules: {
					// 对name字段进行必填验证
					houseingName: {
						rules: [{
							required: true,
							errorMessage: '请输入房源',
						}, ]
					},
					costId: {
						rules: [{
							required: true,
							errorMessage: '请输入缴费人',
						}, ]
					},
					maintenanceProjectsId: {
						rules: [{
							required: true,
							errorMessage: '请选择维修项目',
						}, ]
					},
					theTitle: {
						rules: [{
							required: true,
							errorMessage: '请输入标题',
						}, ]
					},
					problemDescription: {
						rules: [{
							required: true,
							errorMessage: '请输入问题描述',
						}, ]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话号码',
						}, ]
					},
					appointmentTime: {
						rules: [{
							required: true,
							errorMessage: '请输入预约日期',
						}, ]
					},

				}
			}
		},
		created() {
			// // window.localStorage.getItem('token', token)
			// this.token = window.localStorage.getItem('token')
		},
		computed: {
			money() {
				return parseFloat(this.personnel.basisMoney) + parseFloat(this.personnel.otherMoney)
			}
		},
		//初始化路径
		onLoad(val) {
			this.getMaintenceTree()
			this.findCommunity()
			// const it = JSON.parse(decodeURIComponent(val.item));
			// console.log("输出" + it)
			// for (var i in it) {
			// 	var obj = {
			// 		text: it[i].houseNumber,
			// 		tex1: it[i].ownerId,
			// 		tex2: it[i].tenantsId,
			// 		tex3: it[i].id,
			// 		tex4: it[i].account.userName,
			// 		tex5: it[i].user[i].account,
			// 	}
			// 	console.log("obj为" + this.obj)
			// }
			// this.personnel.houseId = obj.tex3
			// this.personnel.chargeId = obj.tex1
			// this.personnel.houseNumber = obj.text
			// this.personnel.costId = obj.tex2
			// this.personnel.userName = obj.tex4
			// this.personnel.account = obj.tex5
		},
		methods: {
			portalclick(e) {
				//户号id
				this.portalId = e.value
				this.personnel.portalId = e.value
				this.huhaoname = e.text
				this.personnel.houseingName = this.xiaoquname + this.loudongname + this.danyuanname + this.loucengname +
					this.huhaoname
				// this.seetreeunder()
				console.log(this.portalId, "hhhhhhhhhhhhhhhhhhhhhhhh")
			},
			floorclick(e) {
				//楼层id
				this.floorId = e.value
				this.personnel.floorId = e.value
				this.loucengname = e.text
				this.findPortal()
				this.portalData = []
				console.log(this.floorId);
				console.log(e)
			},
			// floorclick(e) {
			// 	this.floorId = e.value
			// 	this.findPortal()
			// 	this.portalData = []
			// 	console.log(this.floorId);
			// 	console.log(e)
			// },
			cellclick(e) {
				//单元id
				this.cellId = e.value
				this.personnel.cellId = e.value
				this.danyuanname = e.text
				this.findFloor()
				this.floorData = []
				console.log(e)
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			buildingclick(e) {
				//楼栋id
				this.buildingId = e.value
				this.personnel.buildingId = e.value
				this.loudongname = e.text
				this.findCell()
				this.cellData = []
				console.log(e)
			},
			onnodeclick1(e) {
				//小区id
				this.communityId = e.value
				this.personnel.communityId = e.value
				this.xiaoquname = e.text
				this.findBuilding()
				this.buildingData = []
				console.log(this.communityId);
				console.log(e, "vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv");
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			findPortal() {
				this.$axios({
					url: '/housingestate/portal/appFindPortal/' + this.floorId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.portal)
							let aa = res.data.data.portal
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howPortal,
									value: aa[i].portalId
								}
								this.portalData.push(param)
							}

						}
					}
				})
			},
			findFloor() {
				this.$axios({
					url: '/housingestate/floor/appFindFloor/' + this.cellId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.floor)
							let aa = res.data.data.floor
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howFloor + "层",
									value: aa[i].floorId
								}
								this.floorData.push(param)
							}

						}
					}
				})
			},
			findCell() {
				this.$axios({
					url: '/housingestate/cell/appFindCell/' + this.buildingId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.cell)
							let aa = res.data.data.cell
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].cellNumber + "单元",
									value: aa[i].cellId
								}
								this.cellData.push(param)
							}

						}
					}
				})
			},
			//楼栋
			findBuilding() {
				this.$axios({
					url: '/housingestate/building/appFindBuilding/' + this.communityId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.Building)
							let aa = res.data.data.Building
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howMany + "栋",
									value: aa[i].buildingId
								}
								this.buildingData.push(param)
							}

						}
					}
				})
			},
			//小区
			findCommunity() {
				this.$axios({
					url: '/housingestate/community/appFindAllCommunity',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log("11111111111111111111", res.data.data.community)
							let aa = res.data.data.community
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].communityName,
									value: aa[i].communityId
								}
								this.dataTree1.push(param)
							}

						}
					}
				})
			},
			//获取项目类类型
			getMaintenceTree() {
				this.$axios({
					url: '/systemuser/maintenance/getMaintenceTree',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							for (var i = 0; i < res.data.data.list.length; i++) {
								var param = {
									text: res.data.data.list[i].typeName,
									value: res.data.data.list[i].projectTypeId,
									children: []
								}
								for (var v = 0; v < res.data.data.list[i].maintenances.length; v++) {
									var param1 = {
										text: res.data.data.list[i].maintenances[v].theProjectName,
										value: res.data.data.list[i].maintenances[v].maintenanceProjectsId,
									}
									param.children.push(param1)
								}
								this.dataTree.push(param)
								console.log(this.dataTree, "///////////////////////////////////")
							}
						}
					}
				})
			},

			onpopupopened(e) {
				console.log('popupopened2222222');
			},
			onnodeclick(e) {
				this.personnel.maintenanceProjectsId = e.value
				this.personnel.projectTypeId = e.parent_value
				console.log(e, "hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh");
			},
			onchange(e) {
				console.log('onchange:', e);

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost/systemuser/maintenance/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							this.personnel.fileUrl = res.data
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			/* 选择账单类型回显 */
			choosedecorate(index) {
				this.personnel.billName = this.decoratelist[index].text
			},
			findelevator() {
				this.elevatorshow = true
			},
			sum() {
				this.personnel.money = parseFloat(this.personnel.basisMoney) + parseFloat(this.personnel.otherMoney)
			},
			onTapCell() {
				uni.navigateTo({
					url: './login',
				})
			},

			fh() {
				uni.showModal({
					content: '！！！',
					showCancel: false
				});
				uni.navigateTo({
					url: './login?statu=' + this.statu
				})
			},
			cz() {
				this.personnel = {}; //表单重置
			},
			// 提交按钮
			submitForm(ref) {
				debugger
				this.$refs.form.validate().then(res => {
					this.$axios({
						url: '/systemuser/maintenance/saveMaintence',
						data: this.personnel,
						method: 'POST',
						success: (res) => {
							if (res.data.success == true) {
								uni.showModal({
									content: '申请成功',
									showCancel: false
								});
								uni.navigateTo({
									url: './jianxiu'
								})
							} else {
								uni.showModal({
									content: '申请失败',
									showCancel: false
								});
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>
<style>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-login {
		background-color: #2B85E4;
		width: 100%;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.inputBox {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.button-zhuce {
		color: #ffa800;
		font-size: 34rpx;
		width: 200rpx;
		height: 10rpx;
		/* text-align: right; */
		margin-left: 230rpx;
		margin-top: 30rpx;
	}

	.dd {
		width: 230rpx;
		height: 50rpx;
		font-size: 10rpx;
		background-color: #DD6161;
		text-align: center;
	}
</style>
